<template>
  <div class="ZCTableColSelect-wrap">
    <el-dropdown trigger="click">
      <el-button icon="el-icon-s-grid"></el-button>
      <el-dropdown-menu style="padding-left: 10px" slot="dropdown">
        <el-checkbox
          :disabled="disabledAll"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 10px 0"></div>
        <el-checkbox-group
          style="margin-right: 10px"
          v-model="checkedHead"
          @change="handleCheckedHeadChange"
        >
          <div v-for="(headName, index) in headArr" :key="index">
            <el-checkbox :label="headName" :key="headName">
              {{ headName }}
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'ZCTableColSelect',
  components: {},
  props: {
    tableColumn: {
      type: Array,
      default() {
        return []
      },
    },
    disabledAll: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    headArr() {
      return this.tableColumn.map((item) => item.name)
    },
  },
  data() {
    return {
      checkAll: false,
      checkedHead: [],
      isIndeterminate: true,
    }
  },
  watch: {
    checkedHead: function (val) {
      this.$emit('changeTableHead', val)
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedHead = val ? this.tableColumn.map((item) => item.name) : []
      this.isIndeterminate = false
    },
    handleCheckedHeadChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.headArr.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.headArr.length
    },
    // 用例：
    // changeTableHead(checkedArr) {
    //   this.testColumn = this.testColumn.map((item) => {
    //     item.hide = true
    //     checkedArr.forEach((a, i, n) => {
    //       if (a === item.name) {
    //         item.hide = false
    //       }
    //     })
    //     return item
    //   })
    //   console.log(this.testColumn)
    //   debugger
    // },
  },
  created() {},
  mounted() {
    let pre = this.tableColumn.filter((item) => !item.hide)
    this.checkedHead = pre.map((item) => item.name)
  },
}
</script>

<style lang="less">
.ZCTableColSelect-wrap {
  padding: 0;
  width: fit-content;
}
</style>
